<template>
    <footer>
        <router-link class="item" to="/home">
            <i class="iconfont icon-shouye"></i>
            <p>首页</p>
        </router-link>
        <router-link class="item" to="/type">
            <i class="iconfont icon-fenlei"></i>
            <p>分类</p>
        </router-link>
        <router-link class="item" to="/order">
            <i class="iconfont icon-dingdan"></i>
            <p>订单</p>
        </router-link>
        <router-link class="item" to="/about">
            <i class="iconfont icon-wode"></i>
            <p>我的</p>
        </router-link>
    </footer>
</template>

<script>
    export default {
        name:"Footer-Component",
    
    }
</script>

<style scoped lang="less">
    footer{
        width: 100%;
        height: 12vw;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 1.3vw 0;
        background: #fff;
        text-decoration: none;
        box-shadow: 0 1.3vw 1.3vw 2.1vw rgba(0, 0, 0, 0.096);

        .item{
            width: 21.3vw;
            display: block;
            text-align: center;
            color: #333;
            text-decoration: none !important; 

            i{
                font-size: 5.3vw;
                font-weight: 1000;
            }

            p{
                
            }
        }

        .active{
            width: 21.3vw;
            display: block;
            text-align: center;
            color: #1272FE;
        }

    }
</style>